<template>
	<div>
		<Breadcrumb :opt-data="breadcrumbOptData"></Breadcrumb>
		<PageLayout>
			<div class="table-container height-100">
				<EZTable
					v-loading="tableLoading"
					:table-id="tableId"
					:table-hdl="tableHdl"
					:rows="mapRuleData"
					:custom-empty="true"
					@pageChanged="getMapRuleData"
					@sizeChanged="getMapRuleData"
					@filterChange="getMapRuleData">
					<EmptyContent slot="empty" :opt-data="tableOptData"></EmptyContent>
				</EZTable>
			</div>
		</PageLayout>
		<div v-if="false">
			<el-form-item label="目标属性" :prop="!isArrayParam ? 'targetProp' : 'targetPropInArray'">
				<el-row>
					<el-col :span="!isArrayParam ? 24 : 12">
						<el-select
							v-model="methodMapForm.targetProp"
							placeholder="请选择目标属性名称"
							class="width-100"
							@change="targetPropChange">
							<el-option
								v-for="param in paramOptions" :key="param.paramKey"
								:label="`${param.paramKey} ${param.paramAlias}`" :value="param.paramKey">
								<span>{{param.paramKey}}</span>
								<span class="mar-lft-10 font-color-warning">{{param.paramAlias}}</span>
							</el-option>
						</el-select>
					</el-col>
					<el-col v-if="isArrayParam" :span="12" class="pad-lft-5">
						<el-select
							v-model="methodMapForm.targetPropInArray"
							placeholder="请选择数组目标属性名称"
							class="width-100"
							@change="targetPropInArrayChange">
							<el-option
								v-for="param in paramOptionsInArray" :key="param.paramKey"
								:label="`${param.paramKey} ${param.paramAlias}`" :value="param.paramKey">
								<span>{{param.paramKey}}</span>
								<span class="mar-lft-10 font-color-warning">{{param.paramAlias}}</span>
							</el-option>
						</el-select>
					</el-col>
				</el-row>
			</el-form-item>
		</div>
	</div>
</template>

<script>
	import EZTable from '@/components/table/EZTable.vue';
	import tableConfig from "@/config/table/platformInterface";
	import {tableIdConfig, tableOptBtnConfig} from "@/config/table";
	import {assembleTableOptBtn, getTableConfig, TableStateHdl} from "@/modules/routeParamStateHdl";
	import {confirmHandle, deepCopyWithJson} from "@/utils";
	import {commonConfig, momentFormat} from "@/config/common";
	import {routerMeta} from "@/router/routerMeta";
	import {secretHdl} from "@/modules/secretHdl";

	export default {
		name: "PlatformInterface",
		components: {
			EZTable
		},
		data() {
			return {
				commonConfig: commonConfig,
				platformId: '',
				tableLoading: true,
				tableId: tableIdConfig.platformInterface,
				tableHdl: null,
				mapRuleData: [],
			};
		},
		computed: {
			breadcrumbOptData() {
				return [
					{
						type: 'btn',
						label: '新增映射规则',
						icon: 'icon-tianjia',
						callback: () => {
							this.mapRuleAdd();
						}
					},
				];
			},
			tableOptData() {
				return [
					{
						type: 'btn',
						label: '新增映射规则',
						icon: 'icon-tianjia',
						callback: () => {
							this.mapRuleAdd();
						}
					}
				];
			},
		},
		activated() {
			this.platformId = this.$route.params.pid;
			this.initTableConfig();
			this.getMapRuleData();
		},
		methods: {
			initTableConfig() {
				if (this.tableHdl) return;
				const {columns = [], filters = []} = getTableConfig(this.tableId, tableConfig);
				assembleTableOptBtn(columns, ({type = '', data = {}}) => {
					if (!type) return;
					const mapRule = deepCopyWithJson(data);
					switch (type) {
						case tableOptBtnConfig.edit.type:
							this.$router.push({
								name: routerMeta.platformInterfaceEdit.name,
								params: {
									pid: this.platformId,
									iid: mapRule._id,
								}
							});
							break;
						case tableOptBtnConfig.delete.type:
							this.mapRuleDelete(mapRule);
							break;
						default:
							break;
					}
				});
				this.tableHdl = new TableStateHdl(this.$route.name, this.tableId, columns, filters);
			},
			getMapRuleData() {
				this.tableLoading = true;
				const selector = {};
				const tableParam = this.tableHdl.assembleTableParam();
				API.thirdPartyPlatform.platformInterfaceList({...tableParam, selector}).then(result => {
					this.tableLoading = false;
					const {data = [], total = 0} = result;
					this.mapRuleData = data;
					this.tableHdl.total = total;
				}).catch(err => {
					this.tableLoading = false;
				});
			},
			mapRuleAdd() {
				this.$router.push({
					name: routerMeta.platformInterfaceAdd.name,
					params: {pid: this.platformId}
				});
			},
			mapRuleDelete(mapRule = {}) {

			},
		},
	}
</script>

<style scoped lang="less">

</style>